
import { Input, Table, Space, Popconfirm } from 'antd';
import axios from 'axios'
import { useEffect,useState } from 'react';

 const { Search } = Input; 
import './todo.css'


function Todo() {
    const onSearch = async(value) => {
    const res = await axios.get(`http://localhost:3000/data?${value}`)
    const result = res.data.filter((item)=>(item.name===value))
    Setlist(result) 
  }
  const del = async(id) =>{
   const res = await axios.delete(`http://localhost:3000/data/${id}`) 
    const arr = list.filter((item)=> (item.id!==res.data.id))
    Setlist(arr) 
  }    
  
  const [list,Setlist] = useState([])
 useEffect(()=>{
      axios.get('http://localhost:3000/data').then(res=>{
      console.log(res);
      Setlist(res.data)  
  })},[])   
   
  const columns = [
    {
      title: '任务编号',
      dataIndex: 'id',
      key: 'id'
    },
    {
      title: '任务名称',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: '任务描述',
      dataIndex: 'des',
      key: 'des'
    },
    {
      title: '操作',
      dataIndex: 'do',
      key: 'do',
      render: (text, record) => (
        <Space size='middle'>
          <Popconfirm title="确定删除吗?" onConfirm={()=>del(record.id)}>
            <a href='#' >删除</a>
          </Popconfirm>
        </Space>
      )
    }
  ]




  return (
    <div className="container">
      <div className="search-box">
        <Search
         placeholder='请输入关键词'
         onSearch={onSearch}
         allowClear
         size='large'
         enterButton="搜索"
        ></Search>
      </div>

      <Table
        bordered
        columns={columns}
        dataSource={list}
        pagination={false}
        rowKey={(item)=>item.id}
      ></Table>
    </div>
  )
}

export default Todo;